<template>
  <div class="背景">
    <TchHead :welcome="welcome" :title="title" />
    <div class="内容">
      <div class="作业内容一级标题" @click="$router.push('/TchAddWork')">
        新增作业
      </div>
      <div style="width: 100%">
        <div
          class="作业单元"
          v-for="(item, index) in workList"
          :key="index"
          @click="toWork(index)"
        >
          <div class="作业顶部">
            <span class="作业标题">{{ item.work_title }}</span>
            <span :class="item.work_state">{{ item.work_state }}</span>
            <span class="作业文字">{{ item.work_upnumber }}</span>
          </div>
          <div>{{ item.work_content }}</div>
          <div class="图片预览">
            <el-image
              style="width: 100px; height: 100px"
              v-if="item.work_img1 !== ''"
              :src="item.work_img1"
            />
            <el-image
              style="width: 100px; height: 100px"
              v-if="item.work_img2 !== ''"
              :src="item.work_img2"
            />
            <el-image
              style="width: 100px; height: 100px"
              v-if="item.work_img3 !== ''"
              :src="item.work_img3"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TchHead from "@/components/TchHead";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      welcome: "某老师，您好！",
      title: "",
      form: {
        tch_id: "",
        cou_id: "",
      },
      workList: [],
    };
  },
  mounted() {
    // 修改顶部
    this.welcome = localStorage.getItem("zyh_welcome");
    this.title = localStorage.getItem("zyh_cou_name");

    // 载入数据
    this.form.tch_id = localStorage.getItem("zyh_tch_id");
    this.form.cou_id = localStorage.getItem("zyh_cou_id");
    request.post("/mentor/seeTchWork.php", this.form).then((res) => {
      if (res.code !== "200") {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        this.workList = res.data;
      }
    });
  },
  components: {
    TchHead,
  },
  methods: {
    toWork(i) {
      // if (this.workList[i].work_upnumber.charAt(0) === "0") {
      //   ElMessage({
      //     type: "error",
      //     message: "暂无学生提交作业",
      //   });
      // } else {
      //   localStorage.setItem("zyh_work_id", this.workList[i].work_id);
      //   this.$router.push("/TchSeeWork");
      // }
      localStorage.setItem("zyh_work_id", this.workList[i].work_id);
      this.$router.push("/TchSeeWork");
    },
  },
};
</script>

<style>
.作业内容一级标题 {
  margin-bottom: 14px;
  padding: 15px;
  border-radius: 7px;
  background-color: white;
  font-size: 18px;
  line-height: 20px;
}
.作业单元 {
  padding: 15px 5px;
  margin-bottom: 14px;
  background-color: #fff;
  border: 2px solid #797979;
  border-radius: 18px;
  font-size: 14px;
}
.作业顶部 {
  padding-bottom: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ff5252;
}
.作业标题 {
  width: 40%;
  font-size: 16px;
  line-height: 20px;
}
.未发布,
.进行中,
.已结束 {
  background-color: #adb5bd;
  line-height: 20px;
  border-radius: 4px;
  padding: 0 3px;
}
.进行中 {
  background-color: #ffc069;
}
.已结束 {
  color: white;
  background-color: #000000;
}
.作业文字 {
  width: 40%;
  text-align: right;
}
.图片预览 {
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
</style>